<template>
  <div class="cart-page">
    <div class="page-header">
      <div class="header-content">
        <el-button @click="$router.push('/medicines')">返回商城</el-button>
        <h1>购物车</h1>
      </div>
    </div>

    <div class="cart-content" v-loading="loading">
      <!-- 空购物车提示 -->
      <el-empty
        v-if="!cartItems.length"
        description="购物车是空的"
      >
        <el-button type="primary" @click="$router.push('/medicines')">
          去购物
        </el-button>
      </el-empty>

      <!-- 购物车列表 -->
      <template v-else>
        <div class="cart-list">
          <el-card v-for="item in cartItems" :key="item.id" class="cart-item">
            <div class="item-content">
              <!-- 商品图片 -->
              <div class="item-image">
                <img :src="item.image" :alt="item.name" />
              </div>

              <!-- 商品信息 -->
              <div class="item-info">
                <h3 class="item-name">{{ item.name }}</h3>
                <p class="item-price">¥{{ item.price.toFixed(2) }}</p>
              </div>

              <!-- 数量控制 -->
              <div class="item-quantity">
                <el-input-number
                  v-model="item.quantity"
                  :min="1"
                  :max="item.stock"
                  @change="updateQuantity(item)"
                />
              </div>

              <!-- 小计 -->
              <div class="item-subtotal">
                <span class="label">小计：</span>
                <span class="amount">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
              </div>

              <!-- 操作按钮 -->
              <div class="item-actions">
                <el-button
                  type="danger"
                  plain
                  @click="removeItem(item)"
                >
                  删除
                </el-button>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 购物车底部 -->
        <div class="cart-footer">
          <div class="cart-summary">
            <span class="total-label">总计：</span>
            <span class="total-amount">¥{{ totalAmount.toFixed(2) }}</span>
          </div>

          <div class="cart-actions">
            <el-button plain @click="$router.push('/medicines')">继续购物</el-button>
            <el-button type="primary" @click="checkout" :disabled="!cartItems.length">
              结算
            </el-button>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onActivated } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'Cart',
  setup() {
    const router = useRouter()
    const store = useStore()
    const loading = ref(false)
    
    // 使用Vuex的计算属性获取购物车数据
    const cartItems = computed(() => store.state.cart)
    const totalAmount = computed(() => store.getters.cartTotal)
    
    const updateQuantity = (item) => {
      store.commit('UPDATE_CART_ITEM_QUANTITY', {
        id: item.id,
        quantity: item.quantity
      })
      ElMessage.success('数量已更新')
    }
    
    const removeItem = (item) => {
      ElMessageBox.confirm(
        '确定要从购物车中删除这个商品吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        store.commit('REMOVE_FROM_CART', item.id)
        ElMessage.success('商品已删除')
      })
    }
    
    const checkout = () => {
      router.push('/checkout')
    }
    
    onMounted(() => {
      store.dispatch('syncCartFromLocalStorage')
    })

    onActivated(() => {
      store.dispatch('syncCartFromLocalStorage')
    })
    
    return {
      loading,
      cartItems,
      totalAmount,
      updateQuantity,
      removeItem,
      checkout
    }
  }
}
</script>

<style scoped>
.cart-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeIn 0.5s ease-in-out;
}

.page-header {
  margin-bottom: 30px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
  color: #2c3e50;
}

.cart-list {
  margin-bottom: 30px;
}

.cart-item {
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.cart-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.item-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.item-image {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 8px;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 16px;
  color: #2c3e50;
  margin: 0 0 10px;
}

.item-price {
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.item-quantity {
  width: 150px;
}

.item-subtotal {
  width: 150px;
  text-align: right;
}

.item-subtotal .label {
  color: #606266;
}

.item-subtotal .amount {
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
}

.item-actions {
  width: 80px;
  text-align: right;
}

.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.cart-summary {
  font-size: 18px;
}

.total-label {
  color: #606266;
  margin-right: 10px;
}

.total-amount {
  color: #f56c6c;
  font-size: 24px;
  font-weight: bold;
}

.cart-actions {
  display: flex;
  gap: 15px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式布局 */
@media (max-width: 768px) {
  .item-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .item-image {
    width: 80px;
    height: 80px;
  }

  .item-quantity,
  .item-subtotal {
    width: 100%;
    text-align: left;
  }

  .cart-footer {
    flex-direction: column;
    gap: 15px;
  }

  .cart-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style> 